<template>
    <div>
        <div class="main-top">
            <h2>详情</h2>
            <div class="handle">
                    <span>

                        <template  v-if="!isEdit">
                            <router-link class="bnt-blue"
                                         :to="{path: `/rule/${id}/edit`}">
                            编辑
                            </router-link>
                        </template>

                        <template v-else>
                            <a href="javascript:;" @click="updateRule()" class="bnt-blue">保存</a>
                            <router-link class="bnt-blue bnt-cancle"
                                     :to="{path: `/rule/${id}`}">取消</router-link>
                        </template>

                    </span>
            </div>
        </div>

        <div class="main-nav">
            <div class="main-nav-title">
                <template v-if="isEdit && id !== 'default' ">
                    <input type="text" v-model="share.ruleName" />
                </template>
                <template v-else>
                    {{share.ruleName}}
                </template>
            </div>
            <div class="main-nav-right">
                签到对象
            </div>
        </div>

        <div class="main-content">
            <div class="main-content-left">
                <template v-if="isEdit">

                    <div class="tr-item">
                        <div class="td-item">
                            <label>上班时间：</label>
                            <div class="td-area time-area time-area-edit">
                                <input type="time" v-model="share.signInTime" />
                                <span class="font-blue">-</span>
                                <input type="time" v-model="share.signOutTime" />
                            </div>
                        </div>
                        <div class="td-item">
                            <label>午休时间：</label>
                            <div class="td-area">
                                <input type="time" v-model="share.noonBreakStartTime" />
                                <span class="font-blue">-</span>
                                <input type="time" v-model="share.noonBreakEndTime" />
                            </div>
                        </div>
                    </div>

                    <div class="tr-item">
                        <div class="td-item">
                            <label>旷工时间：</label>
                            <div class="td-area time-area time-area-edit">
                                <input type="time" v-model="share.absenteeismTime" />
                            </div>
                        </div>
                        <div class="td-item">
                            <label>加班时间：</label>
                            <div class="td-area">
                                下班后
                                <input type="number" v-model="share.workOvertimeTime" />
                                <select v-model="share.workOvertimeTimeType">
                                    <option :selected="share.workOvertimeTimeType == 1" value="1">分钟</option>
                                    <option :selected="share.workOvertimeTimeType == 2" value="2">小时</option>
                                </select>
                                开始计时
                            </div>
                        </div>
                    </div>

                    <div class="tr-item">
                        <div class="td-item">
                            <label>靠勤节点：</label>
                            <div class="td-area">
                                每月
                                <input type="number" class="timeNode" v-model="share.timeNode" />
                                日开始考勤 (输入数字为1-31)
                            </div>
                        </div>
                    </div>

                    <div class="tr-item tr-position">

                        <div class="td-item">
                            <label>签到地点：</label>
                            <div class="td-area">
                                <a href="javascript:;" class="addposition"> <span>+</span> 添加地点</a>
                                <span class="font-gray">在指定范围内有效,可添加多个地点。</span>
                            </div>
                        </div>
                        <div class="td-item block">
                            <div class="td-area-list">
                                <ul>
                                    <li v-for="(it , index) in share.placeLimitation">
                                        <span>签到地点{{index+1}}:</span>
                                        <span>{{it.posName}}</span>
                                        <span class="font-gray">({{it.range}}米内)</span>
                                        <span class="del icon-shanchu"></span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>

                </template>

                <template v-else>

                    <div class="tr-item">
                        <div class="td-item">
                            <label>上班时间：</label>
                            <div class="td-area time-area">
                                <span class="font-blue">{{share.signInTime}}</span>
                                <span class="font-blue">-</span>
                                <span class="font-blue">{{share.signOutTime}}</span>
                            </div>
                        </div>
                        <div class="td-item">
                            <label>午休时间：</label>
                            <div class="td-area">
                                <span class="font-blue">{{share.noonBreakStartTime}}</span>
                                <span class="font-blue">-</span>
                                <span class="font-blue">{{share.noonBreakEndTime}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="tr-item">
                        <div class="td-item">
                            <label>旷工时间：</label>
                            <div class="td-area time-area">
                                <span class="font-blue">{{share.absenteeismTime}}</span>
                            </div>
                        </div>
                        <div class="td-item">
                            <label>加班时间：</label>
                            <div class="td-area">
                                下班后
                                <span class="font-blue">{{share.workOvertimeTime}}</span>
                                <template v-show="share.workOvertimeTimeType == 1">分钟</template>
                                <template v-show="share.workOvertimeTimeType == 2">小时</template>
                                开始计时
                            </div>
                        </div>
                    </div>

                    <div class="tr-item">
                        <div class="td-item">
                            <label>靠勤节点：</label>
                            <div class="td-area time-area">
                                每月
                                <span class="font-blue">{{share.timeNode}}</span>
                                日开始考勤
                            </div>
                        </div>
                    </div>
                    <div class="tr-item tr-position">
                        <div class="td-item" v-for="(it , index) in share.placeLimitation">
                            <label>签到地点{{ index + 1 }}：</label>
                            <div class="td-area">
                                <span class="name">{{it.posName}}</span>
                                <span class="len">({{it.range}}米内)</span>
                            </div>
                        </div>
                    </div>

                </template>

            </div>
            <div class="main-content-side">
                <a href="javascript:;" class="add" @click="dialogTransfer()" v-show="isEdit && id !== 'default' "><span class="icon-iconjia"></span></a>
                <ul>
                    <li v-for="it in signobj" @click="showSignObj(it)">
                        {{it.groupName}}
                        <span class="icon-guanbi del" @click="delSignInObject($event)" v-show="isEdit"></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script>

    export default {
        data () {
            return {
                id              : this.$route.params.id  || 'default',
                companyId       : this.$store.state.companyId,
                isEdit          : this.$route.params.edit === 'edit',
                rules           : [],
                signobj         : [],
                share           : {
                    companyId            : '',
                    ruleName             : '',
                    signInTime           : '',
                    signOutTime          : '',
                    noonBreakStartTime   :'',
                    noonBreakEndTime     : '',
                    absenteeismTime      : '',
                    workOvertimeTime     : '',
                    workOvertimeTimeType : "1",
                    placeLimitation      : [],

                    //视图中无关紧要，但需要发送给服务器
                    createTime           : 1503902908827,
                    groupId              : null,
                    ipLimitation         : null,
                    ipLimitationFlag     : false,
                    ruleStatus           : '',
                    ruleType             : '',
                    outOfRange           : false,
                    placeLimitationFlag  : true,
                },
                defaultRule     : {
                    companyId  : "" ,
                    createTime : "",
                    rule : {},
                    ruleId: "",
                    updateTime: ""
                },
                groupRuleItem : {
                    absenteeismTime: "",
                    companyId: "",
                    createTime: "",
                    groupId: "",
                    uuid : "",
                    ipLimitation: "",
                    placeLimitation: [

                    ]
                }
            }
        },

        watch : {
            '$route'(to) {
                this.id     = to.params.id || 'default';
                this.isEdit = to.params.edit || '';
            },
            id () {
                this.id && this.id !== 'default' ? this.ruleId() : this.ruleDefault();
            },
            defaultRule (val) {
                if(val && val.rule) {
                    this.share.signInTime           = val.rule.signInTime
                    this.share.signOutTime          = val.rule.signOutTime
                    this.share.noonBreakStartTime   = val.rule.noonBreakStartTime
                    this.share.noonBreakEndTime     = val.rule.noonBreakEndTime
                    this.share.absenteeismTime      = val.rule.absenteeismTime
                    this.share.workOvertimeTime     = val.rule.workOvertimeTime
                    this.share.workOvertimeTimeType = val.rule.workOvertimeTimeType
                    this.share.ruleName             = val.rule.ruleName
                    this.share.timeNode             = val.rule.timeNode
                    this.share.placeLimitation      = val.rule.placeLimitation

                    //妹的，以下是无关紧要的数据，但必须存起来，返给后端,傻傻的api,我是喷子吗，我也是醉了
                    this.share.createTime           = val.rule.createTime
                    this.share.updateTime           = val.updateTime
                    this.share.ruleId               = val.ruleId

                    this.share.groupId              = val.rule.groupId
                    this.share.companyId            = val.rule.companyId
                    this.share.ipLimitation         = val.rule.ipLimitation
                    this.share.ipLimitationFlag     = val.rule.ipLimitationFlag
                    this.share.ruleStatus           = val.rule.ruleStatus
                    this.share.ruleType             = val.rule.ruleType
                    this.share.outOfRange           = val.rule.outOfRange
                    this.share.placeLimitationFlag  = val.placeLimitationFlag
                }
            },
            groupRuleItem (val) {
                if(val) {
                    this.share.signInTime           = val.signInTime
                    this.share.signOutTime          = val.signOutTime
                    this.share.noonBreakStartTime   = val.noonBreakStartTime
                    this.share.noonBreakEndTime     = val.noonBreakEndTime
                    this.share.absenteeismTime      = val.absenteeismTime
                    this.share.workOvertimeTime     = val.workOvertimeTime
                    this.share.workOvertimeTimeType = val.workOvertimeTimeType
                    this.share.ruleName             = val.ruleName
                    this.share.timeNode             = val.timeNode

                    //妹的，以下是无关紧要的数据，但必须存起来，返给后端,傻傻的api,我是喷子吗，我也是醉了
                    this.share.createTime           = val.createTime
                    this.share.groupId              = val.groupId
                    this.share.ipLimitation         = val.ipLimitation
                    this.share.ipLimitationFlag     = val.ipLimitationFlag
                    this.share.ruleStatus           = val.ruleStatus
                    this.share.ruleType             = val.ruleType
                    this.share.outOfRange           = val.outOfRange
                    this.share.placeLimitationFlag  = val.placeLimitationFlag
                    this.share.ruleId               = val.uuid

                    if(val.placeLimitation.length){
                        for(let item of val.placeLimitation){
                            this.share.placeLimitation.push(JSON.parse(item));
                        }
                    }else{
                        this.share.placeLimitation = [];
                    }

                }
            }
        },

        created () {
            this.id && this.id !== 'default' ? this.ruleId() : this.ruleDefault();
        },

        methods : {

            //加载默认规则
            async ruleDefault () {
                let res  = await this.api.ruleOne(this.companyId,'default');
                this.defaultRule = res.data[0];
                this.signobj= [];
            },

            //规则项
            async ruleId() {
                let ruleItem = await this.api.ruleOne(this.id);       //规则项内容
                let signobj  = await this.api.signObj(this.id);       //签到对象
                this.groupRuleItem = ruleItem.data[0];
                this.signobj = signobj.data;
            },

            //显示规则-签到对象成员
            async showSignObj(item) {
                let member = await this.api.signObjMember(item.uuid);
                member.data && member.data.length ? (member = member.data) : (member = false)

                this.$pop({
                    title       : item.groupName,
                    memberlist  : member
                });
            },

            //更新单个规则
            async updateRule () {
                let data        = this.pickData();
                let isdefault   = this.id && this.id === 'default';
                let res         = await this.api.rulesUpdate(data,isdefault);
                console.log(res);
            },

            //弹出签到对象组
            async dialogTransfer() {
                let res     = await this.api.signObjGroup(this.companyId);
                let data    = res.status === 200 ? res.data : '';
                let len     = 5 - this.signobj.length;
                this.$transfer({
                    group : data,
                    limit : len
                },(item)=>{
                    this.addDataInSign(item)
                });
            },

            //添加数据到签到对象列表
            addDataInSign (item) {
                let send = [];
                item.forEach(val=>{
                    let repeat = this.signobj.find((item)=>{
                        return item.uuid === val.uuid;
                    });
                    if(!repeat){
                        send.push(val.uuid);
                        this.signobj.push(val);
                    }
                });
                this.api.signObjUpdate(this.share.ruleId,send);
            },


            delSignInObject (e) {
                console.log(111);
                e.stopPropagation();
            },

            //捡出需要更新的数据,坑爹的API
            pickData () {
                if(this.id){
                    if(this.id === 'default') {
                        return {
                            companyId   : this.companyId,
                            createTime  : this.share.createTime,
                            rule : {
                                absenteeismTime         : this.share.absenteeismTime,
                                companyId               : null,
                                createTime              : 0,
                                groupId                 : this.share.groupId,
                                ipLimitation            : this.share.ipLimitation,
                                ipLimitationFlag        : this.share.ipLimitationFlag,
                                noonBreakEndTime        : this.share.noonBreakEndTime,
                                noonBreakStartTime      : this.share.noonBreakStartTime,
                                outOfRange              : this.share.outOfRange,
                                placeLimitation         : this.share.placeLimitation,
                                placeLimitationFlag     : this.share.placeLimitationFlag,
                                ruleName                : this.share.ruleName,
                                ruleStatus              : this.share.ruleStatus,
                                ruleType                : this.share.ruleType,
                                signInTime              : this.share.signInTime,
                                signOutTime             : this.share.signOutTime,
                                timeNode                : this.share.timeNode,
                                uuid                    : this.share.ruleId,
                                workOvertimeTime        : this.share.workOvertimeTime,
                                workOvertimeTimeType    : this.share.workOvertimeTimeType,
                            },
                            ruleId      : this.share.ruleId,
                            updateTime  : this.share.updateTime
                        }
                    }else{
                        return {
                            absenteeismTime      : this.share.absenteeismTime,        //矿工时间
                            companyId            : this.companyId,                    //公司ID

                            createTime           : this.share.createTime,
                            groupId              : this.share.groupId,
                            ipLimitation         : this.share.ipLimitation,
                            ipLimitationFlag     : this.share.ipLimitationFlag,

                            noonBreakEndTime     : this.share.noonBreakEndTime,       //午休
                            noonBreakStartTime   : this.share.noonBreakStartTime,     //午休

                            outOfRange           : this.share.outOfRange,

                            placeLimitation      : this.share.placeLimitation,        //地点

                            placeLimitationFlag  : this.share.placeLimitationFlag,

                            ruleName             : this.share.ruleName,              //规则名

                            ruleStatus           : this.share.ruleStatus,
                            ruleType             : this.share.ruleType,

                            signInTime           : this.share.signInTime,             //签到时间
                            signOutTime          : this.share.signOutTime,            //签退时间
                            timeNode             : this.share.timeNode,               //签到节点
                            uuid                 : this.id ,                           //规则id
                            workOvertimeTime     : this.share.workOvertimeTime,       //加班时间
                            workOvertimeTimeType : this.share.workOvertimeTimeType    //加班计时类型
                        }
                    }
                }

            },

        },

    }
</script>
